<template>
  <!-- 评价 -->
  <div class="evaluate">
    <el-dialog
      title="评价"
      :visible.sync="dialogVisible"
      @closeDialog="closeDialog"
      :before-close="cancel"
    >
      <div class="score">
        <span>评分：</span>
        <el-rate v-model="value" :max="3" show-text :texts="texts"></el-rate>
      </div>
      <div class="discuss">
        <span>评论：</span>
        <el-input
          placeholder="请输入评价"
          type="textarea"
          v-model="text"
          maxlength="255"
          :autosize="{ minRows: 2 }"
        ></el-input>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="cancel">取 消</el-button>
        <el-button size="mini" type="primary" @click="confirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    // clickId: {
    //   default: () => null,
    // },
  },
  data() {
    return {
      value: null,
      text: "",
      dialogVisible: false,
      texts: ["模糊", "一般", "清晰"],
    };
  },
  created() {},
  methods: {
    confirm() {
      console.log(this.value, this.text);
      if (this.value == "" || this.value == null) {
        this.$message({
          type: "warning",
          message: "请评分!",
          showClose: true,
        });
        return;
      }
      if (this.text == "" || this.value == null) {
        this.$message({
          type: "warning",
          message: "请输入您的评价!",
          showClose: true,
        });
        return;
      }
      this.$emit("evaluateDialogConfirm", {
        value: this.value,
        text: this.text,
      });
      this.dialogVisible = false;
      this.value = "";
      this.text = "";
    },
    cancel() {
      this.dialogVisible = false;
      this.value = "";
      this.text = "";
    },
    closeDialog() {
      this.$emit("closeDialog", this.dialogVisible);
    },
    openDialog() {
      this.dialogVisible = true;
    },
  },
};
</script>

<style lang="scss" scoped>
.evaluate {
  ::v-deep.el-dialog__body,
  ::v-deep.el-dialog__footer {
    background: #474747;
    color: #ffffff;
  }
  ::v-deep.el-dialog__header {
    background: #143853 !important;
    & span {
      color: #ffffff;
    }
  }
  ::v-deep.el-dialog__body {
    color: #ffffff;
    background: #0f2d43 !important;
  }
  ::v-deep.el-dialog__footer {
    color: #ffffff;
    background: #0f2d43 !important;
  }
  ::v-deep.el-form-item__label {
    color: #ffffff;
  }
  ::v-deep.el-input__inner {
    background: #383838;
    border-radius: 5px;
    color: #ffffff;
    border: none;
  }
  ::v-deep.upload-demo {
    padding: 0.3rem 0 0 0.16rem;
    margin-top: -0.2rem;
  }
  ::v-deep.el-rate__text {
    color: #ffffff !important;
  }
  ::v-deep.el-textarea__inner {
    height: 1rem;
    background: #144f87;

    // opacity: 0.65;
    border: 1px solid #0355a4;
    border-radius: 0.05rem;
    color: #ffffff;
  }
  ::v-deep.el-input__count {
    background: #144f87;
    // opacity: 0.65;
    border: none;
  }
}
.score {
  display: flex;
  margin-bottom: 0.2rem;
  span {
    min-width: 0.7rem;
  }
}
.discuss {
  display: flex;
  span {
    min-width: 0.7rem;
  }
  ::v-deep .el-textarea {
    background: #144f87;
    color: #ffffff;
  }
}
</style>